<template>
	<view class="msg-item">
		<movable-area>
			<movable-view :x="x" :y="y" direction="horizontal"
			@change="onChange"
			@touchstart="onTouch"
			>
				<u-row>
					<view style="width: 100vw;">
						<u-row>
							<u-col span="2">
								<u-avatar :src="msg.avatar"></u-avatar>
							</u-col>
							<u-col span="10">
								<u-row 
								 customStyle="margin-bottom: 2px padding: 0 100rpx"
								 >
									<u-col  span="7">
										<view class="name">{{msg.name}}</view>
									</u-col>
									<u-col class="time" span="3" offset="1" customStyle="text-align: center">
										<view class="time">{{msg.time}}</view>
									</u-col>
								</u-row>
								<u-row>
									<view class="content">{{msg.content}}</view>
								</u-row>
							</u-col>
						</u-row>
					</view>
					<view style="width: 20vw;height: 100%" @click="del">
						<view class="btn-delete">
							<view>删除</view>
						</view>
					</view>
				</u-row>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		props:["msg", "index"],
		name:"msg-item",
		data() {
			return {
				x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0
				}
			};
		},
		created() {
			uni.$on("broItemTouched", index => {
				if(this.index !== index){
					this.recover();
				}
			})
		},
		methods: {
			del(){
				this.recover();
				this.$emit("deleteListMsg", this.index);
			},
			recover(){
				this.x = this.old.x
				this.y = this.old.y
				this.$nextTick(function() {
					this.x = 0
					this.y = 0
				});
			},
			onTouch(){
				uni.$emit("broItemTouched", this.index)
			},
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			}
		}
	}
</script>

<style>
	.msg-item {
		padding: 0 12px;
		border-bottom: 1px solid #F0F0F0;
		background-color: #FCFCFC;
	}
	movable-view {
		display: flex;
		width: 120vw;
		height: 120rpx;
		background-color: #FCFCFC;
	}
	
	movable-area {
		width: 100vw;
		height: 120rpx;
		background-color: #D8D8D8;
		overflow: hidden;
	}
	.name {
		
	}
	.time {
		font-size: 10px;
		/* border: 1px solid green; */
	}
	.content {
		font-size: 10px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.btn-delete {
		width: 100%;
		
		height: 100%;
		background-color: red;
		color: white;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
